<template>
  <div class="box">
    <div class="content">
      <div
        v-for="(item, index) in tool"
        :class="['item', activeIndex === index || dbtm === index ? 'active' : '']"
        :key="item.id"
        @click="item.cb"
      >
        <div class="raduis">
          <img :src="item.icon" alt="" />
        </div>
        <div class="title">{{ item.title }}</div>
      </div>
    </div>

    <el-button
      align="right"
      type="primary"
      style="
        margin-top: 15px;
        width: 146px;
        height: 40px;
        border-radius: 4px;
        opacity: 1;
        background: linear-gradient(90deg, #3f97f0 3%, #003f82 99%);
      "
      @click="clearTool"
      >清除分析</el-button
    >
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { options_analyse } from '../../../../js/test'
const rzfx = ref(false);
const activeIndex = ref(-1);
const dbtm = ref(-1);

const tool = [
  {
    id: 1,
    title: '日照分析',
    icon: '/static/assets/3d/rz.png',
    cb: () => {
      activeIndex.value == 0 ? (activeIndex.value = -1) : (activeIndex.value = 0)
      rzfx.value = !rzfx.value
      map3d.enableTimeControl(rzfx.value)
    }
  },

  // {
  //   id: 3,
  //   title: '方量分析',
  //   icon: '/static/assets/3d/flfx.png',
  //   cb: options_analyse.方量分析
  // },
  {
    id: 4,
    title: '地表透明',
    icon: '/static/assets/3d/dbtm.png',
    cb: () => {
      dbtm.value == 1 ? (dbtm.value = -1) : (dbtm.value = 1)
      options_analyse.地表透明 = !options_analyse.地表透明
      map3d.alphaUnderground(options_analyse.地表透明, options_analyse.地表透明 ? 0.2 : 1)
    }
  },
    {
    id: 2,
    title: '可视域',
    icon: '/static/assets/3d/rz.png',
    cb: options_analyse.可视域
  },
  {
    id: 5,
    title: '地形开挖',
    icon: '/static/assets/3d/dxkw.png',
    cb: options_analyse.地形开挖
  },
  {
    id: 6,
    title: '坡度坡向',
    icon: '/static/assets/3d/pdpx.png',
    cb: options_analyse.坡度坡向
  }
]

const clearTool = ()=>{
  map3d.clearViewShed();
  map3d.clearDig();
  map3d.clearSlopAnalys();
  map3d.depthTest(false);
}
</script>

<style>
  .cesium-viewer-animationContainer,.cesium-viewer-timelineContainer{
    bottom: 30px !important;
  }
</style>
<style lang="scss" scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 16px;
   justify-content: space-around;
  .content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    // justify-content: space-around;
    font-size: 16px;
    .item:nth-of-type(3n) {
      margin-right: 0;
    }

    .item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 15px;
      width: 125px;
      padding: 10px 0;
      cursor: pointer;
      &:hover {
        background-color: #149ec98a;
        border-radius: 8px;
      }
    }
    .active {
      background-color: #149ec98a;
    }
    .raduis {
      width: 68;
      height: 68;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .title {
      margin-top: 10px;
    }
  }
}
</style>